<template>
  <div class="md:flex">
    <template v-for="(item, index) in chartCardList" :key="item.title">
      <ChartCard
        :loading="loading"
        :title="item.title"
        :total="item.total"
        class="md:w-1/4 w-full !md:my-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-4']"
      >

        <Bar v-if="index === 0" :option="option" :chartData="statistics.memberNumberStatistics" height="50px"></Bar>
        <Bar v-if="index === 1" :option="option" :chartData="statistics.businessPNumberStatistics" height="50px"></Bar>
        <Bar v-if="index === 2" :option="option" :chartData="statistics.businessQNumberStatistics" height="50px"></Bar>
        <Bar v-if="index === 3" :option="option" :chartData="statistics.companyNumberStatistics" height="50px"></Bar>

        <template #footer>
          <span>{{ item.footer }}<span>{{ item.value }}</span></span>
        </template>
      </ChartCard>
    </template>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import ChartCard from '/@/components/chart/ChartCard.vue';
import Bar from '/@/components/chart/Bar.vue';
import {chartCardList} from '../data';
import {queryNumberStatistics} from '../api';

const props = defineProps({
    loading: {
      type: Boolean,
    },
  });
  const option = ref({ xAxis: { show: false, boundaryGap: false }, yAxis: { show: false, boundaryGap: false } });
  const statistics = ref({});

  onMounted(async () => {
    initNumberStatistics();
  });

  /**
   * 获取总数统计
   */
  function initNumberStatistics() {
    queryNumberStatistics(null).then((res) => {
      if (res.success) {
        statistics.value = res.result;
        chartCardList.forEach((item,index) => {
          if (index == 0) {
            item.total = res.result.memberNumber;
          } else if (index == 1) {
            item.total = res.result.businessPNumber;
          } else if (index == 2) {
            item.total = res.result.businessQNumber;
          } else if (index == 3) {
            item.total = res.result.companyNumber;
          }
        });
      }
    });
  }
</script>
